import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
//
class ImageEx extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image 示例'),),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.7v6.net%2Fuploads%2Fallimg%2F200417%2F141-20041F93144926.jpg&refer=http%3A%2F%2Fwww.7v6.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625881967&t=ff420e9eebabcaa488299e5d1d7df320'),
            Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F3fee54d0b2e0b7a132319a8e104f5fdc2edd3d35d03ee-93Jmdq_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625882084&t=44ec5af65af26aa8cdabefaab2854c8f'),
            ImagePlace(),
            ImageCache(),
          ],
        ),
      )

    );
  }
}

//用占位符淡入图片
//FadeInImage适用于任何类型的图片：内存、本地Asset或来自网上的图片。
class ImagePlace extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Center(child: FadeInImage.memoryNetwork(placeholder: kTransparentImage,
            image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg'),)
      ],
    );
  }
}

//使用缓存图片
//在某些情况下，在从网上下载图片后缓存图片可能会很方便，以便它们可以脱机使用。为此，我们可以使用cached_network_image包来达到目的。
class ImageCache extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child:  CachedNetworkImage(
          placeholder: (
              BuildContext context,
              String url,
              ){
            return CircularProgressIndicator();
          },
          imageUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg',
        ),
    );
  }
}